<template>
	<hx-navbar title="收银台" />
	<view v-if="!loading" class="pay-container">
	  <view class="pay-amount text-price">
		￥{{ state.order.paymentPrice || '0.00' }}
	  </view>
	  <view class="pay-countdown">请在30分钟内付款，超时订单自动取消</view>
  
	  <u-cell-group :border="false">
		<!-- #ifndef MP-ALIPAY -->
		<u-cell-item
		  icon="weixin-fill"
		  :icon-style="{ color: '#19be6b' }"
		  title="微信支付"
		  :arrow="false"
		  @click="paymentType = '1'"
		>
		  <template #right-icon>
			<u-radio-group v-model="paymentType">
			  <u-radio name="1" />
			</u-radio-group>
		  </template>
		</u-cell-item>
		<!-- #endif -->
  
		<!-- #ifndef MP-WEIXIN -->
		<u-cell-item
		  icon="zhifubao"
		  :icon-style="{ color: '#2979ff' }"
		  title="支付宝支付"
		  :arrow="false"
		    @click="paymentType = '2'"
		>
		  <template #right-icon>
			<u-radio-group v-model="paymentType">
			  <u-radio name="2" />
			</u-radio-group>
		  </template>
		</u-cell-item>
		<!-- #endif -->
	  </u-cell-group>
  
	  <u-button
		shape="circle"
		class="pay-button"
		type="primary"
		@click="onPrepay"
	  >
		立即支付
	  </u-button>
	</view>
  </template>
  
  <script setup lang="ts">
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive, ref } from 'vue';
  import { prepay } from '@/utils/pay';
  import { getById, orderPrepay } from '@/api/order/orderInfo';
  
  const loading = ref(true);
  const paymentType = ref<'1' | '2'>('1');
  const state = reactive<{ order: any }>({ order: {} });
  
  onLoad((options) => {
	if (options?.id) {
	  getOrder(options.id);
	}
  });
  
  const getOrder = (id: string) => {
	getById(id)
	  .then((res) => {
		state.order = res.data || {};
	  })
	  .catch(() => {
		uni.$u.toast('获取订单信息失败');
	  })
	  .finally(() => {
		loading.value = false;
	  });
  };
  
  const onPrepay = () => {
	if (!state.order?.id) return;
  
	const tradeTypeMap = {
	  '1': {
		// 微信
		MP: 'WX_JSAPI_PAY',
		H5: 'WX_H5_PAY',
		APP: 'WX_APP_PAY',
	  },
	  '2': {
		// 支付宝
		MP: 'ALI_JSAPI_PAY',
		H5: 'ALI_H5_PAY',
		APP: 'ALI_APP_PAY',
	  },
	};
  
	let tradeType = '';
	// #ifdef MP
	tradeType = tradeTypeMap[paymentType.value].MP;
	// #endif
	// #ifdef H5
	tradeType = tradeTypeMap[paymentType.value].H5;
	// #endif
	// #ifdef APP-PLUS
	tradeType = tradeTypeMap[paymentType.value].APP;
	// #endif
  
	const prepayParams: any = {
	  id: state.order.id,
	  paymentType: paymentType.value,
	  tradeType,
	};
  
	// 仅支付宝 H5 需要 returnUrl 和 quitUrl
	// #ifdef H5
	if (paymentType.value === '2') {
	  prepayParams.returnUrl = window.location.origin +`/#/pages/pay-result/index?id=${state.order.id}`;
	  prepayParams.quitUrl =  window.location.origin +`/#/pages/order-pay/index?id=${state.order.id}`;
	}
	// #endif
  
	orderPrepay(prepayParams).then((res) => {
	  const data = res.data;
	  prepay(data, state.order, `/pages/order/pay-result/index?id=${state.order.id}`, paymentType.value);
	});
  };
  </script>
  
  <style lang="scss">
  .pay-container {
	background-color: #fff;
	padding: 40rpx 30rpx;
  }
  
  .pay-amount {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60rpx 0 24rpx;
	font-size: 48rpx;
	font-weight: bold;
	color: #e93323;
  }
  
  .pay-countdown {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 60rpx;
	color: #909090;
	font-size: 26rpx;
  }
  
  .pay-button {
	margin-top: 100rpx;
  }
  </style>
  